@media (dark-mode: false) {
    .card_root_layout {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        radius: 14px;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }
}

@media (dark-mode: true) {
    .card_root_layout {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        radius: 14px;
        width: 100%;
        height: 100%;
        background-color: #2E3033;
    }
}
.box_row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.box_col {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
}

.button_mute {
    width: 40%;
    height: 60%;
    font-size: 14px;
    font-weight: bold;
    text-color: #FFFFFF;
}

.volume_indicator {
    border-radius: 16px;
    height: 30%;
    width: 40%;
    background-color: #80898989;
    overflow:hidden;
}

.inner_indicator_bar {
    background-color: #0074D8;
}

.refresh_button {
    width: 12%;
    background-color: rgba(0,0,0,0);
}